<template>
  <div>
    <!-- 评论栏部分 -->
    <h2>评论</h2>
    <!-- 文本域 -->
    <el-row>
      <textarea
        v-model="form.content"
        class="textarea"
        placeholder="说儿点什么吧"
        autocomplete="off"
        style="resize:none;"
        ref="textarea"
        cols="30"
        rows="6"
        id="cdj"
      ></textarea>
    </el-row>

    <!--  action必选参数，上传的地址
      name上传的文件字段名
      on-preview点击文件列表中已上传的文件时的钩子
      on-remove文件列表移除文件时的钩子
      on-success文件上传成功时的钩子
      :clearFiles	清空已上传的文件列表
 -->
    <el-row class="submit" type="flex" justify="space-between">
      <el-row class="upload">
        <el-upload
          ref="buttons"
          action="http://127.0.0.1:1337/upload"
          name="files"
          list-type="picture-card"
          :on-remove="handleRemove"
          :on-success="handleAvatarSuccess"
          :clearFiles="handleclearFiles"  
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-row>
      <p class="button" @click="handlesubmit">提交</p>
    </el-row>

    <!-- 评论部分 -->
    <Comment
      :commentItem="item"
      v-for="(item, index) in commentItem"
      :key="index"
      @handleReply="handleReply"
    />

    <!-- 分页 -->
    <el-row class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="commends.length"
      ></el-pagination>
    </el-row>
  </div>
</template>

<script>
import Comment from "@/components/post/comment.vue";
export default {
  data() {
    return {
      form: {
        content: "",
        pics: [],
        post: this.$route.query,
        follow: Number
      },
      // 定义一个数组来接收返回来的评论
      commends:[],
      commentItem: [],
      pageIndex:1,
      pageSize:2
      
    };
  },
  components: {
    Comment
  },
  methods: {
    // 获取评论数据
    getComments() {
      // 发送请求，获取评论
      this.$axios({
        url: "/posts/comments",
        post: this.$route.query
      }).then(res => {
        const { data } = res.data;
        console.log(res.data);
        this.commends = data;
        this.commentItem = this.commends.slice(0, this.pageSize);
      });
    },

    handleReply(obj) {
      // 得到想要回复那个人的id
      this.form.follow = obj.id;
      console.log(this.form.follow);
    },
    // 点击移出图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
      const id = file.response[0].id;
      let index = this.form.pics.findIndex((v, i) => {
        id == v.id;
      });
      this.form.pics.splice(index, 1);
    },
    // 图片上传成功
    handleAvatarSuccess(res, file) {
      this.form.pics.push(res[0]);
    },
    //提交成功后清除图片
    handleclearFiles() {},
    // 提交评论

    // 分页相关功能
    // 切换条数
    handleSizeChange(val){
      this.pageSize = val;
      this.commentItem = this.commends.slice(0, this.pageSize)
    },
    // 切换页码
    handleCurrentChange(val){
      this.pageIndex = val;
      this.commentItem = this.commends.slice(
        (this.pageIndex - 1) * this.pageSize,
        this.pageSize * this.pageIndex
      ) 
    },
    handlesubmit() {
      if (this.form.content == "" && this.form.pics.length == 0) {
        this.$message.warning("评论内容或图片不能为空,请正确填写您的评论");
        return;
      }
      this.$axios({
        url: "/comments",
        method: "post",
        data: this.form,
        headers: {
          "Content-Type": "application/json",
          Authorization:`Bearer ${this.$store.state.user.userInfo.token}`
        }
      }).then(res=>{
        //   console.log(res);
        if(res.status==200){
            this.$message.success("评论成功");
            this.getComments();
            this.handleclearFiles();
            this.form.content = "";
            this.form.pics = [];
        }
      })
    }
  },
  mounted() {
      this.getComments();
  }
};
</script>

<style lang="less" scoped>
h2 {
  margin-bottom: 10px;
}

textarea {
  width: 100%;
  padding: 5px;
  height: 60px;
}
.submit {
  margin-top: 10px;
  margin-bottom: 30px;
  .button {
    cursor: pointer;
    text-align: center;
    background: #409eff;
    color: #fff;
    font-size: 14px;
    width: 60px;
    height: 30px;
    line-height: 30px;
    border-radius: 5px;
  }
}
</style>
